<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="得闲技术 Team">
    <meta name="copyright" content="得闲技术">
    <title>编辑角色 - Powered By 得闲技术</title>
    [#include "/admin/main/resources/list.ftl"/]
    <script src="${base}/resources/common/tree/jstree.min.js"></script>
    <link href="${base}/resources/common/tree/themes/default/style.css" rel="stylesheet">
    [#include "/admin/admin/role/template.ftl" /]
    <style>
        .line {
            border-left: 1px solid #d8e2ef;
        }
    </style>
</head>
<body class="admin secondary">
<main>
    <div class="container-fluid">
        <form id="saveOrUpdateForm" class="ajax-form form-horizontal" action="update" method="post">
            <input type="hidden" name="id" value="[#if content??]${content.id}[#else]0[/#if]" />
            <div class="panel panel-default">
                <div class="panel-heading">编辑角色</div>
                <div class="panel-body padding-5">

                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#basic" data-toggle="tab">基本信息</a>
                        </li>
                        <li>
                            <a href="#other" data-toggle="tab">其他信息</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="basic" class="tab-pane active">

                            <div class="row">
                                <div class="col-xs-8 col-sm-8">
                                    <div class="form-group">
                                        <label class="col-xs-3 col-sm-2 control-label item-required"
                                                for="identity">标识:</label>
                                        <div class="col-xs-9 col-sm-4">
                                            <div class="input-group">
                                                <span class="input-group-addon" id="basic-addon1">ROLE_</span>
                                                [#if content??]
                                                    <input id="identity" name="identity"
                                                            class="text-uppercase form-control" type="text"
                                                            maxlength="30"
                                                            required style="text-transform:uppercase;"
                                                            value="${(content.identity?substring(5,content.identity?length))!}">
                                                [#else]
                                                    <input id="identity" name="identity"
                                                            class="text-uppercase form-control" type="text"
                                                            maxlength="30"
                                                            required style="text-transform:uppercase;" value="">
                                                [/#if]
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 col-sm-2 control-label item-required"
                                                for="name">名称:</label>
                                        <div class="col-xs-9 col-sm-4">
                                            <input id="name" name="name" class="form-control" type="text" maxlength="20"
                                                    value="${content.name!}"
                                                    required="required" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-3 col-sm-2 control-label item-required"
                                                for="name">数据权限:</label>
                                        <div class="col-xs-9 col-sm-4">
                                            [#list dataScopeList as dataScope]
                                                <div class="radio radio-inline">
                                                    <input class="data-scope" id="dataScope_${dataScope}"
                                                            name="dataScope" type="radio" value="${dataScope}"
                                                            [#if content.dataScope==dataScope]checked="checked"[/#if]>
                                                    <label for="dataScope_${dataScope}">${message("DataScopeEnum." + dataScope)}</label>
                                                </div>
                                            [/#list]
                                        </div>
                                    </div>

                                    <div class="form-group [#if content.dataScope != "CUSTOM"]hidden[/#if]"
                                            id="data-scope-selected">
                                        <label class="col-xs-3 col-sm-2 control-label item-required" for="departmentId">部门:</label>
                                        <div class="col-xs-9 col-sm-4">
                                            <select name="departmentIds" id="departmentIds"
                                                    class="selectpicker form-control"
                                                    data-live-search="true"
                                                    multiple>
                                                [#list departments as department]
                                                    <option value="${department.id}" id="option-${department.id}"
                                                            [#if !department.isEnabled]disabled="disabled"[/#if] >
                                                        [#if department.grade != 0]
                                                            [#list 1..department.grade as i]
                                                                &nbsp;&nbsp;
                                                            [/#list]
                                                        [/#if]
                                                        ${department.name}
                                                    </option>
                                                [/#list]
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-3 col-sm-2 control-label item-required"
                                                for="order">排序:</label>
                                        <div class="col-xs-9 col-sm-4" title="越小越靠前" data-toggle="tooltip">
                                            <input id="order" name="order" class="form-control" type="text"
                                                    digits="true" min="0" max="999999999" value="${content.order}"
                                                    required="required" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-3 col-sm-2 control-label">设置:</label>
                                        <div class="col-xs-9 col-sm-4">
                                            <div class="checkbox checkbox-inline">
                                                <input name="_isSystem" type="hidden" value="false">
                                                <input id="isSystem" name="isSystem" type="checkbox" value="true"
                                                        [#if content.isSystem]checked[/#if]>
                                                <label for="isSystem">系统内置</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-3 col-sm-2 control-label " for="description">描述:</label>
                                        <div class="col-xs-9 col-sm-4">
                                    <textarea id="description" name="description" class="form-control" type="text"
                                            maxlength="200">${content.description!}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xs-4 col-sm-4 line">
                                    <div id="permission" class="tab-pane">
                                        [#include "/admin/admin/role/perms.ftl"/]
                                    </div>
                                </div>

                            </div>

                        </div>

                        <div id="other" class="tab-pane">

                            <div class="form-group">
                                <label class="col-xs-3 col-sm-2 control-label" for="createDate">创建时间:</label>
                                <div class="col-xs-9 col-sm-4 form-control-static">
                                    ${(content.createDate?string("yyyy-MM-dd HH:mm:ss"))!}
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 col-sm-2 control-label" for="modifyDate">修改时间:</label>
                                <div class="col-xs-9 col-sm-4 form-control-static">
                                    ${(content.modifyDate?string("yyyy-MM-dd HH:mm:ss"))!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-xs-9 col-sm-10 col-xs-offset-3 col-sm-offset-2">
                            <button class="btn btn-primary" type="submit">确 定</button>
                            <button class="btn btn-default" type="button" data-action="back">返 回</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</main>
<script>
    $().ready(function () {
        var departmentList = [[#list content.roleDepartments as d]${d.departmentId}[#if d_has_next], [/#if][/#list]];

        for (let i = 0; i < departmentList.length; i++) {
            let id = departmentList[i];
            let $option = $("#option-" + id);
            if($option.attr("disabled") !== "disabled"){
                $option.attr("selected", "selected");
            }
        }

        var $dataScope = $(".data-scope");
        var $dataScopeSelected = $("#data-scope-selected");

        $dataScope.click(function () {
            let $this = $(this);

            if ($this.val() === "CUSTOM") {
                $dataScopeSelected.removeClass("hidden");
                $("#departmentIds").rules("add", {required: true})
                $("#departmentIds").closest("div.form-group").find("label").addClass("item-required")
            } else {
                $dataScopeSelected.addClass("hidden");
                $("#departmentIds").rules("remove", "required");
                $("#departmentIds").closest("div.form-group").find("label").removeClass("item-required")
            }
        });

        var $saveOrUpdateForm = $("#saveOrUpdateForm");

        // 表单验证
        $saveOrUpdateForm.validate({
            rules: {
                identity: {
                    required: true,
                    pattern: /^[0-9a-zA-Z_]+$/,
                    remote: {
                        url: "check_identity",
                        cache: false,
                        data: {
                            identity: function () {
                                return $("#identity").val();
                            },
                            oldIdentity: function () {
                                return "[#if content??]${(content.identity?substring(5,content.identity?length))!}[#else][/#if]";
                            }
                        }
                    }
                },
            },
            messages: {
                identity: {
                    remote: "标识符已存在",
                    pattern: "只允许数字、英文、下划线的组合"
                }
            },
            submitHandler: function (form) {
                var size = $("#addAuthoritiesContent").find("input[name='authorities']").size();
                if (size === 0) {
                    $.bootstrapGrowl("请选择权限", {
                        type: "warning"
                    });
                    return false;
                }
                $(form).ajaxSubmit();
            }
        });
    });
</script>
</body>
</html>
